<template>
	<view class="content">
		<view class="avatorWrapper">
			<view class="avator">
				<image class="img" src="http://r7hvave5i.hn-bkt.clouddn.com/p2.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="form">
			<view class="inputWrapper">
				<input class="input" type="text" v-model="username" placeholder="请输入用户名"/>
			</view>
			<view class="inputWrapper">
				<input class="input" type="password" v-model="password" placeholder="请输入密码"/>
			</view>
			<view class="loginBtn" @click="login">
				<text class="btnValue">登录</text>
			</view>
			<view class="forgotBtn" @click="findpwd">
				<text>找回密码</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username:"",
				password:""
			}
		},
		onLoad() {

		},
		methods: {
			login(){
				uni.request({
					url:"http://localhost:6061/auth/loginApp/",
					method:"POST",
					data:{
						username:this.username,
						apassword:this.password
					},
					success:(res) => {
						if(res.data.code==200){
							console.log(res.data.data);
							uni.setStorage({
								key:'token',
								data:res.data.data.token,
								success() {
									console.log("设置登录token成功"),
									uni.switchTab({
										url:"../personal/my",
										success() {
											console.log("跳转到个人成功")
										}
									})
								}
							});
							uni.setStorage({
								key:'uid',
								data:res.data.data.id,
								success() {
									console.log("设置uid成功")
								}
							});
						}else{
							uni.showToast({
								title:"密码错误喔",
								duration:1500
							})
						}
					}
				})
			},
			findpwd(){
				console.log("找回密码");
				uni.navigateTo({
					url:"findpwd"
				})
			}
		}
	}
</script>

<style>
	.content {
		background: #377EB4;
		width: 100vw;
		height: 100vh;
	}
	.avatorWrapper{
		height: 30vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	.avator{
		width: 200upx;
		height: 200upx;
		overflow: hidden;
	}
	.avator .img{
		width: 100%
	}
	.form{
		padding: 0 100upx;
		margin-top: 80px;
	}
	.inputWrapper{
		width: 100%;
		height: 80upx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
	}
	.inputWrapper .input{
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 15px;
	}
	.loginBtn{
		width: 100%;
		height: 80upx;
		background: #77B307;
		border-radius: 50upx;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.loginBtn .btnValue{
		color: white;
	}
	.forgotBtn{
		text-align: center;
		color: #EAF6F9;
		font-size: 15px;
		margin-top: 20px;
	}
</style>
